<template>
    <el-row class="edit">
        <el-container style="height: 100%;">
            <el-header height="60px">
                上传票面图片
            </el-header>
            <el-main>
                <el-form label-width="115px" label-position="left">
                    <el-form-item label="票面图片 :">
                        <el-upload ref="upload" action="''"
                                   :on-remove="handleRemove"
                                    list-type="picture-card"
                                    :file-list="showImgs"
                                    :auto-upload="false"
                                   :http-request="uploadFile"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                <el-form-item label="详情图 :">
                    <el-upload ref="upload" action="''"
                               :on-remove="detailRemove"
                               list-type="picture-card"
                               :file-list="detailShowImgs"
                               :auto-upload="false"
                               :http-request="uploadFileDeatail"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="轮播图 :">
                    <el-upload ref="upload" action="''"
                               :on-remove="carouseRemove"
                               list-type="picture-card"
                               :file-list="carouselShowImgs"
                               :auto-upload="false"
                               :http-request="uploadFileCarouse"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                </el-form>
            </el-main>
            <el-footer height="80px">
                <el-row style="height: 20px;margin-bottom: 5px;">
                    <transition name="el-zoom-in-bottom">
                        <el-row v-show="infoShow" style="display: flex;justify-content: center;align-items: center;">
                            {{ (info !== '') ? "提示信息："+info : ''}}
                        </el-row>
                    </transition>
                </el-row>

                <el-row style="display: flex;justify-content: center;align-items: center;">
                    <el-button @click="submit" type="primary">
                        保存
                    </el-button>
                    <el-button @click="editOut">
                        取消
                    </el-button>
                </el-row>
            </el-footer>
        </el-container>
    </el-row>
</template>

<script>
    import {replaceSpacesObj} from "../../../utils/webUtils";

    export default {
        name: "addImg",
        props: {
            tictObj:{
                type:Object
            }
        },
        data() {
            return {
                tictTict:this.tictObj,
                addTictData: {
                    imgStr:'',
                    detailImgStr:'',
                    carouseImgStr:''
                },
                info: '',
                infoShow: false,
                showImgs:[],
                list:[],
                detailShowImgs:[],
                detailList:[],
                carouselShowImgs:[],
                carouseList:[]
            }
        },
        watch: {
            tictObj(val) {
                this.tictTict = val;
            }
        },
        mounted() {
            if(this.tictObj.imgStr != null && this.tictObj.imgStr != ''){
                JSON.parse(this.tictObj.imgStr).forEach(res=>{
                    this.showImgs.push({'name':res.filename,'url':"https://whcm.21theone.cn:9010/respu/"+res.url})
                })
            }else if(this.tictObj.detailImgStr != null && this.tictObj.detailImgStr != '') {
                JSON.parse(this.tictObj.detailImgStr).forEach(res => {
                    this.detailShowImgs.push({'name': res.filename, 'url': "https://whcm.21theone.cn:9010/respu/" + res.url})
                })
            }else if(this.tictObj.carouseImgStr != null && this.tictObj.carouseImgStr != '') {
                JSON.parse(this.tictObj.carouseImgStr).forEach(res => {
                    this.carouselShowImgs.push({'name': res.filename, 'url': "https://whcm.21theone.cn:9010/respu/" + res.url})
                })
            }
        },
        methods: {
            handleRemove(file, fileList) {
                this.carouselShowImgs = fileList
            },
            detailRemove(file, fileList) {
                this.detailShowImgs = fileList
            },
            carouseRemove(file, fileList) {
                this.showImgs = fileList
            },
            uploadFile(item){
                let formData = new FormData();
                formData.append('upFile', item.file);
                this.axios.post(
                    "https://whcm.21theone.cn:9010/tck/kdi/tict/"+this.tictObj.uuid+"/imgup",formData
                ).then(res=>{
                    this.list.push({'filename':res.data.filename,'url':res.data.url})
                    this.addTictData.imgStr = JSON.stringify(this.list)
                    this.uploadImg();
                }).catch(error => {
                    console.log(error);
                    this.info = "图片上传失败！";
                    this.infoShow = true;
                });
            },
            uploadFileCarouse(item){
                console.log("1111111111");
                let formData = new FormData();
                formData.append('upFile', item.file);
                this.axios.post(
                    "https://whcm.21theone.cn:9010/tck/kdi/tict/"+this.uuid+"/imgup",formData
                ).then(res=>{
                    this.carouseList.push({'filename':res.data.filename,'url':res.data.url})
                    this.addTictData.carouseImgStr = JSON.stringify(this.carouseList)
                    this.uploadImg();
                }).catch(error => {
                    console.log(error);
                    this.info = "图片上传失败！";
                    this.infoShow = true;
                });
            },
            uploadFileDeatail(item){
                console.log("33333333");
                let formData = new FormData();
                formData.append('upFile', item.file);
                this.axios.post(
                    "https://whcm.21theone.cn:9010/tck/kdi/tict/"+this.uuid+"/imgup",formData
                ).then(res=>{
                    this.detailList.push({'filename':res.data.filename,'url':res.data.url})
                    this.addTictData.detailImgStr = JSON.stringify(this.detailList)
                    this.uploadImg();
                }).catch(error => {
                    console.log(error);
                    this.info = "图片上传失败！";
                    this.infoShow = true;
                });
            },
            submit() {
                if(this.showImgs.length>0){
                    this.showImgs.forEach(res=>{
                        this.list.push({'filename':res.name,'url':res.url.substr(res.url.lastIndexOf('tict'))})
                    })
                    this.addTictData.imgStr = JSON.stringify(this.list)
                }else if (this.detailShowImgs.length>0){
                    this.detailShowImgs.forEach(res=>{
                        this.detailList.push({'filename':res.name,'url':res.url.substr(res.url.lastIndexOf('tict'))})
                    })
                    this.addTictData.detailImgStr=JSON.stringify(this.detailList)
                    console.log("详情图"+this.addTictData.detailImgStr);
                }else if(this.carouselShowImgs.length>0) {
                    this.carouselShowImgs.forEach(res => {
                        this.carouseList.push({'filename': res.name, 'url': res.url.substr(res.url.lastIndexOf('tict'))})
                    })
                    this.addTictData.detailImgStr = JSON.stringify(this.carouseList)
                    console.log("轮播图" + this.addTictData.carouseImgStr);
                } else{
                    this.addTictData.imgStr = ''
                    this.addTictData.detailImgStr=''
                    this.addTictData.carouseImgStr=''
                }
                this.uploadImg();
                this.$refs.upload.submit()
                this.endProcessing();
                this.$emit('fatherMethod');
            },
            uploadImg(){
                this.axios.request({
                    method: "put",
                    url: "./tck/kdi/tict/"+this.tictObj.uuid+"/img",
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8"
                    },
                    data: replaceSpacesObj(this.addTictData)
                }).then(() => {
                }).catch(error => {
                    console.log(error);
                    this.info = '上传图片后回写imgStr数据失败！';
                    this.infoShow = true;
                });
            },
            endProcessing() {
                this.info = this.info + '修改成功,两秒后关闭';
                this.infoShow = true;
                setTimeout(() => {
                    this.infoShow = false;
                    this.$emit("imgState", false);
                    this.info = '';
                }, 2000);
            },
            editOut() {
                this.infoShow = false;
                this.info = '';
                this.$emit("imgState", false);
                this.$emit('editOut');
            }
        }
    }
</script>

<style scoped>
    .edit {
        width: 334px;
        height: 100%;
        z-index: 100;
    }


</style>
